<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<meta charset="UTF-8">
<title>博客</title>
</head>
<body>

	<form action="${pageContext.request.contextPath}/add" method="post">
		<div id="blogadd"
			style="border: 1px solid red; width: 600px; height: 200px">
			title: <input name="title" /> <br /> content: <input
				name="blogDetail.content" /> <br /> <input type="submit"
				value="添加" />
		</div>
	</form>



	<c:forEach items="${blogs }" var="item" varStatus="i">
		<div style="border: 1px black dotted; margin-top: 20px">

			<c:out value="${i.index }" />
			:
			<c:out value="${item.author.name}" />
			<br />
			<c:out value="${item.title}" />
			<br />
			<c:out value="${item.blogDetail.content}" />
			<br /> 评论：<input id="comment-${item.id }" name="comment" /> <input
				type="button" onclick="onComment('${item.id}')" value="评论" />
			<div id="comment-area-${item.id }">
				<c:forEach items="${item.comments }" var="cm" varStatus="j">
					<c:out value="${j.index +1}" />	:<c:out value="${cm.comment }" />
				</c:forEach>
			</div>




		</div>

	</c:forEach>


	<script type="text/javascript">
		function onComment(blogId) {
			var comment = $("#comment-" + blogId).val();
			$.ajax({
				url : '${pageContext.request.contextPath}/addComment',
				dataType : 'json',
				data : {
					"blogId" : blogId,
					"comment" : comment
				},
				type : 'post',
				async : false,
				success : function(res) {
					
					$("#comment-area-"+blogId).append(res.comment);
				},
				complete : function() {

				}
			})
		}
	</script>
</body>
</html>